<template>
  <div>
    <input type="text" v-model="inputValue">
    <button @click="handleAddItem">添加</button>
    <ul>
<!--      <li v-for="(item,index) in list" :key="index">{{item}}</li>-->
      <list-item v-for="(item,index) in list" :key="index" :msg="item"/>
    </ul>
  </div>
</template>

<script>
import ListItem from "./components/ListItem";
import {ref,reactive} from  'vue';
export default {
  name: 'App',
  components: {
    ListItem,
  },
  setup() {
    const list = reactive([1, 2, 3])
    const inputValue = ref('')

    const handleAddItem = () => {
      list.push(inputValue.value)
      inputValue.value = '';
    };

    return {
      inputValue,
      list,
      handleAddItem
    }
  },

}
</script>

<style>

</style>
